<template>
  <div class="help">
    <el-descriptions title="图片类型信息" style="background-color: white; padding: 1%;">
      <el-descriptions-item label="类型id">{{ imgType[0].id }}</el-descriptions-item>
      <el-descriptions-item label="类型名称">{{ imgType[0].name }}</el-descriptions-item>
      <el-descriptions-item label="是否私密">{{ isSecure[imgType[0].isSecret] }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ parseTime(imgType[0].updateTime) }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ parseTime(imgType[0].createTime) }}</el-descriptions-item>
      <el-descriptions-item label="图片上传" labelStyle="align-items: center;">
        <el-upload
            action=""
            class="upload-demo"
            multiple
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :data="uploadData">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-descriptions-item>
    </el-descriptions>

    <div class="demo-image">
      <div v-for="img in imgList" class="img image-container">
        <img class="image" :src="img.img" alt="">
        <div class="overlay">
          <button class="button" @click="onPreview(img.img)">查看</button>
          <button class="button" @click="deleteImage(img.id)">删除</button>
        </div>
      </div>
      <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[imgUrl]" />
    </div>

    <!-- 分页 -->
    <el-row :gutter="20" class="help-list">
      <el-col :span="24" class="help-page-box">
        <el-pagination
            :current-page="queryInfo.cur"
            :page-size="queryInfo.size"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {parseTime} from "../../utils/date";
import {secret} from "@/utils/enum";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'


export default {
  components: { ElImageViewer },
  data() {
    return {
      isSecure: {
        PUBLIC: "公开",
        PRIVATE: "私密"
      },
      imgUrl: '',
      showViewer: false,
      uploadData: {}, // 上传数据
      tid: 0,
      // 分类查询参数
      queryInfo: {
        cur: 1, // 当前页
        size: 10, // 条目
      },
      // 文章列表
      imgList: [],
      imgType: {},
      total: 0,
    }
  },
  methods: {
    parseTime,
    async toType() {
      const {data: res} = await this.$http.get('/admin/imgType/list', {
        params: {
          imgId: this.tid,
          page: this.queryInfo.cur,
          size: this.queryInfo.size
        }
      }, {
        emulateJSON: true
      })
      // 图片列表赋值
      this.imgType = res.content
    },
    // 根据条件查询
    async toSearch() {
      const {data: res} = await this.$http.get('/admin/imgList/' + this.tid, {
        params: {
          page: this.queryInfo.cur,
          size: this.queryInfo.size
        }
      }, {
        emulateJSON: true
      })
      // 图片列表赋值
      this.imgList = res.content
      this.total = res.totalElements
    },
    // 点击查询按钮
    searchOrder() {
      this.queryInfo.cur = 1
      this.toSearch()
    },
    // 监听 size 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize
      this.toSearch()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange(newCur) {
      this.queryInfo.cur = newCur
      this.toSearch()
    },
    uploadError() {
      this.$message({
        message: '图片上传失败！',
        type: 'error'
      });
    },
    uploadSuccess() {
      this.$message({
        message: '图片上传完成！',
        type: 'success'
      });
    },
    handleBeforeUpload(file) {
      let that = this
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // 将 base64 数据保存到上传数据中
        this.uploadData.base64 = reader.result;
        this.uploadData.tid = that.tid;
        this.$http.post('/admin/img/add', this.uploadData).then(res => {
          this.$message({
            message: '图片已成功添加！',
            type: 'success'
          });
          that.toSearch()
        });
      }
      return false;
    },
    onPreview(img) {
      this.showViewer = true
      this.imgUrl = img
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    // 删除图片
    deleteImage(val) {
      let that = this
      this.$confirm("是否删除该照片?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.get('/admin/img/delete/' + val).then(res => {
          this.$message({
            message: '图片已成功删除！',
            type: 'success'
          });
          that.toSearch()
        });
      });
    }
  },
  created() {
    this.tid = this.$route.params.id
    this.toType()
    this.toSearch()
  }
}
</script>

<style lang="scss">
.help {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* 列表 */
.help-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* 分页 */
.help-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}

.el-pagination__total {
  color: aliceblue;
}

.el-pagination__jump {
  color: aliceblue;
}

.el-image-viewer__close{
  background-color: transparent;
}

.demo-image {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.img {
  margin: 2%;
  position: relative;
}

.img-one {
  width: 100%;
  height: 100%;
}

.image-container {
  width: 14%;
  position: relative;
  display: inline-block;
  &:hover {
    .overlay {
      display: flex !important;
    }
  }
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
}

.button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #fff;
  color: #000;
  border: none;
  cursor: pointer;
}
</style>
